{% extends "profiles/base_profile_edit.html" %}
{% load static %}
{% load i18n %}

{% block profile-admin-gold-edit %}active{% endblock %}

{% block title %}
Read the Docs Gold
{% endblock %}

{% block extra_links %}
  <link rel="stylesheet" href="{% static 'payments/css/form.css' %}" />
{% endblock %}

{% block extra_scripts %}
  <script src="https://js.stripe.com/v2/" type="text/javascript"></script>
  <script type="text/javascript" src="{% static 'vendor/knockout.js' %}"></script>
  <script type="text/javascript" src="{% static 'gold/js/gold.js' %}"></script>
  <script type="text/javascript">
var gold_views = require('gold/gold');
$(document).ready(function () {
    var key;
    //<![CDATA[
    key = '{{ stripe_publishable }}';
    //]]>

    var view = gold_views.GoldView.init({
      key: key,
      form: $('form#gold-register')
    });
});
  </script>
{% endblock %}

{% block edit_content %}
  <div>
    <h2>{% trans 'Read the Docs Gold Membership' %}</h2>

    <p>
      {% blocktrans trimmed %}
        Supporting Read the Docs lets us work more on features that people love.
        Your money will go directly to maintenance and development of the
        product.
      {% endblocktrans %}
    </p>

    <p>
    {% blocktrans trimmed %}
      Becoming a Gold member makes Read the Docs ad-free when you are logged-in.
      Gold members may also completely remove advertising for all visitors to their projects.
    {% endblocktrans %}
    </p>

    <ul class="donate-about">
      <li>{% trans 'For small businesses or personal projects, we ask for $5 per month to remove ads from a project.' %}</li>
      <li>{% trans 'For corporate supported open source projects, we ask for a $50 membership in order to cover our support and operations costs.' %}</li>
    </ul>

    <p>
    {% blocktrans trimmed %}
      If you are a company using Read the Docs,
      please consider <a href="https://readthedocs.com/">Read the Docs for Business</a>.
      This will help us cover our costs,
      and provide you with a better experience on the site.
    {% endblocktrans %}
    </p>

    <p>
      {% blocktrans trimmed %}
        For any questions about our Gold membership program,
        please <a href="mailto:rev@readthedocs.org?subject=Gold%20membership%20questions">email us</a>.
      {% endblocktrans %}
    </p>

    {% trans "Become a Gold member" as subscription_title %}
    {% if golduser %}
      {% trans "Update Your Subscription" as subscription_title %}
    {% endif %}
    <h3>{{ subscription_title }}</h3>

    <form accept-charset="UTF-8" action="" method="post" id="gold-register" class="payment">
      {% csrf_token %}

      {{ form.non_field_errors }}

      {% for field in form.fields_with_cc_group %}
        {% if field.is_cc_group %}
          <p
              data-bind="visible: last_4_card_digits"
              style="display: none;"
              class="subscription-card">
            <label>{% trans "Current card" %}:</label>
            <span class="subscription-card-number">
              ****-<span data-bind="text: last_4_card_digits"></span>
            </span>
          </p>

          <div data-bind="visible: !show_card_form()">
            <a
                href="#"
                data-bind="click: function () { is_editing_card(true); }"
                class="subscription-edit-link">
              {% trans "Edit Card" %}
            </a>
          </div>
          <div
              class="subscription-card"
              data-bind="visible: show_card_form"
              style="display: none;">
            {% for groupfield in field.fields %}
              {% include 'core/ko_form_field.html' with field=groupfield %}
            {% endfor %}
          </div>
        {% else %}
          {% include 'core/ko_form_field.html' with field=field %}
        {% endif %}
      {% endfor %}

      {% trans "Sign Up" as form_submit_text %}
      {% if golduser %}
        {% trans "Update Subscription" as form_submit_text %}
      {% endif %}
      <input type="submit" value="{{ form_submit_text }}" data-bind="click: process_full_form" />

      <em>{% trans "All information is submitted directly to Stripe." %}</em>
    </form>
  </div>
{% endblock %}
